
import { initMap, darkStyle } from "@/utils/common.js";
import { GETNOBASE } from "@/api";
// import { throttle, debounce } from "@/utils/index.js"
export const userMapStore = defineStore("myBmapGLNew", () => {
    const map = ref(null);
    const zoom = ref(10);
    const setCenterAndZoom = (map, centerAndZoom) => {
        const { centerPoint, zoomValue } = centerAndZoom;
        zoom.value = zoomValue;
        map.centerAndZoom(centerPoint, zoomValue);
    };
    // 初始化
    const view = ref(null);
    const initMyMap = () => {
        map.value = initMap({
            tilt: 73,
            heading: 0,
            // center: center,
            center: [117.16634997561688, 39.46893209463477],
            zoom: 9,
            style: darkStyle,
            tilt: 0,
        });
        view.value = new mapvgl.View({
            effects: [
                new mapvgl.BloomEffect({
                    //发光特效
                    threshold: 0.2,
                    blurSize: 4.0,
                    clarity: 0.8, // 注释本行，炫光特效
                }),
            ],
            map: map.value,
            // rotation: 45,// 设置地图的旋转角度
            // pitch: 45// 设置地图的倾斜角度
        });
        // 监测当前缩放等级
        // map.value.addEventListener('zoomend',function(e){
        //     console.log(e.target.zoomLevel)
        // })
        // 天津市平面图层 暂时不用
        // addCityLineLayer(map.value)
        // 各区平面图层
        addFillLayer(map.value);
        // 天津市立体图
        addWallLayer("120000", map.value);
    };

    // TODO 城市轮廓查询, 立体图层
    const regions = ref([]);
    var wallLayer = null;
    var maskLayer
    var polygonLayer
    const addWallLayer = (adcode) => {
        GETNOBASE("/bmapGL/search/v1/boundary", {
            // q: '天津市',
            adcode,
            outputCrs: "bd09ll",
            ApiAuthorization: "USER_AK",
        }).then((res) => {
            regions.value = res.result;
            const boundaries = res.result.filter(v=>v.adcode==adcode)[0].boundaries
            // const boundaries = res.result[0].boundaries;
            const item = boundaries.map(v=>v.split(";"))
            const _data = item.map((v,i) => {
                return v.map(item=>item.split(','))
            });
            console.log(_data)
            // 遮罩层
            maskLayer = new mapvgl.MaskLayer({
                color: 'rgba(0, 0, 0, 0.7)',
                data: [
                    {
                        geometry: {
                            type: "Polygon",
                            coordinates: [_data[0]],
                        }
                    },
                ]
            });
            view.value.addLayer(maskLayer);
            // 立体线图层
            wallLayer = new mapvgl.LineLayer({
                // gradient: {
                //     0: "rgba(57,254,247,0.9)",
                //     1: "#03e5fa",
                // },
                color: 'rgba(57,254,247,0.9)',
                height: 2000,
                data:[
                    {
                        geometry: {
                            type: "LineString",
                            coordinates: _data[0],
                        }
                    },
                ]
            });
            view.value.addLayer(wallLayer);
        });
    };
    // 每个行政区轮廓绘制
    var fillLayer = null;
    const fillData = ref(null);
    const addFillLayer = (map) => {
        if (!fillLayer) {
            GETNOBASE("/map-geojson/120000.json", {}).then((res) => {
                fillData.value = res;
                fillLayer = new BMapGL.FillLayer({
                    minZoom: 9.7,
                    maxZoom: 10.6,
                    crs: "GCJ02",
                    enablePicked: true,
                    autoSelect: true,
                    pickWidth: 30,
                    pickHeight: 30,
                    selectedIndex: 1,
                    borderMasker: true,
                    selectedColor: "#04517d", // 悬浮选中项颜色
                    border: true,
                    borderWeight: 10,
                    style: {
                        fillOpacity: 0.3,
                        strokeWeight: 1,
                        strokeColor: "#01aaff",
                    },
                });

                fillLayer.addEventListener("click", function (e) {
                    if (e.value.dataIndex !== -1 && e.value.dataItem) {
                        // 单独绘制当前行政区
                        const { adcode } = e.value.dataItem.properties;
                        const data = {
                            type: "FeatureCollection",
                            features: res.features.filter(
                                (v) => v.properties.adcode == adcode
                            ),
                        };
                        singleRegionLayer(data);
                        // 绘制下一级站点TODO
                    }
                });
                fillLayer.onShow = function (e) {
                    console.log("显示各区轮廓");
                    // 各区轮廓显示后隐藏最外层城市立体图层
                    hideLayer(wallLayer);
                };
                fillLayer.onHide = function (e) {
                    console.log("隐藏各区轮廓");
                    // 各区轮廓隐藏后显示最外层城市立体图层
                    showLayer(wallLayer);
                };
                map.addNormalLayer(fillLayer);
                fillLayer.setData(res);
                
                // 平面图层
                // polygonLayer = new mapvgl.PolygonLayer({
                //     color: 'transparent',
                //     enablePicked: true, // 是否可以拾取
                //     selectedIndex: -1, // 选中数据项索引
                //     selectedColor: '#04517d', // 选中项颜色
                //     autoSelect: false, // 根据鼠标位置来自动设置选中项
                //     onClick: (e) => { // 点击事件
                //         console.log(e);
                //     },
                //     fillColor: '#04517d',//填充面颜色
                //     lineColor: 'rgba(57,254,247,0.9)',
                //     lineWidth: 10,
                //     lineJoin: 'miter',
                //     data: res.features
                    // [
                    //     {
                    //         geometry: {
                    //             type: "Polygon",
                    //             coordinates: [_data],
                    //         },
                    //         properties: {
                    //             height: 2000, // 多边形高度
                    //         }
                    //     },
                    // ]
                // });
                // view.value.addLayer(polygonLayer);
            });
            return;
        }
        // 已经存在图层，先删除再添加
        // removeOneLayer(map, fillLayer.value)
        // map.addNormalLayer(fillLayer.value);
        // fillLayer.value.setData(fillData.value);
    };

    // 某个行政区轮廓
    var singleLayer = null;
    const singleRegionLayer = (data) => {
        // if (singleLayer) {
        //     removeOneLayer(map.value, singleLayer);
        // }
        // view.value.removeAllLayers()
        hideLayer(wallLayer);
        hideLayer()
        const { center, adcode } = data.features[0].properties;
        // //改变中心点、缩放比例
        let lng = center[0];
        let lat = center[1];
        var point = new BMapGL.Point(lng, lat);
        setCenterAndZoom(map.value, { centerPoint: point, zoomValue: 11 });
        // singleLayer = new BMapGL.FillLayer({
        //     minZoom: 12,
        //     maxZoom: 14,
        //     crs: "GCJ02",
        //     enablePicked: false,
        //     autoSelect: false,
        //     pickWidth: 30,
        //     pickHeight: 30,
        //     selectedIndex: 1,
        //     borderMasker: true,
        //     selectedColor: "#04517d", // 悬浮选中项颜色
        //     border: true,
        //     borderWeight: 10,
        //     style: {
        //         fillOpacity: 0.3,
        //         strokeWeight: 1,
        //         strokeColor: "#01aaff",
        //     },
        // });
        // singleLayer.onShow = function (e) {
        //     // 点击某行政区，隐藏最外层城市立体图层
        //     hideLayer(wallLayer);
        //     // 绘制WMS图层TODO
        // };
        // map.value.addNormalLayer(singleLayer);
        // singleLayer.setData(data);
        addWallLayer(adcode)
    };

    // 隐藏立体图层
    const hideLayer = (layer) => {
        view.value.hideLayer(layer);
    };
    // 显示立体图层
    const showLayer = (layer) => {
        view.value.showLayer(layer);
    };
    // 移除图层
    const removeOneLayer = (map, layer) => {
        map.removeNormalLayer(layer);
    };
    //清除覆盖物
    const removeAllOverlay = () => {
        console.log("清除所有overlays");
        map.value.clearOverlays();
    };
    // 删除点覆盖物
    const deletePoint = (map) => {
        // var allOverlay = map.getOverlays();
        for (var i = 0; i < pointOverlays.value.length - 1; i++) {
            map.removeOverlay(pointOverlays.value[i]);
            return false;
        }
    };
    return {
        initMyMap,
        map
    };
});
